"use client";
import { useRouter } from "next/navigation";
import React, { useState, useEffect } from "react";
import { Table, Button, message, Spin } from "antd";
import Container from "@/components/Container";
import { query, remove } from "@/api/project";
import { clone, pull, install, gitlog } from "@/api/operate";
import getColumns from "./column";
import { DataType } from "./type";
import Dialog from "./Dialog";

export default function Project() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [spinning, setSpinning] = React.useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const [tableList, setTableList] = useState<DataType[]>([]);
  const [dialogData, setDialogData] = useState<DataType | null>(null);

  // 消息提示
  const messageTip = (type: "success" | "error", content: string) => {
    messageApi.open({
      type,
      content,
    });
  };

  // 克隆
  const handleClone = async (id: number) => {
    setSpinning(true);
    const res = await clone(id).finally(() => {
      setSpinning(false);
    });
    if (res.state) {
      handleQuery();
      messageTip("success", "克隆成功");
    } else {
      messageTip("error", res.message);
    }
  };

  // 拉取
  const handlePull = async (id: number) => {
    setSpinning(true);
    const res = await pull(id).finally(() => {
      setSpinning(false);
    });
    if (res.state) {
      messageTip("success", "已拉取最新代码");
    } else {
      messageTip("error", res.message);
    }
  };

  // 安装
  const handleInstall = async (id: number) => {
    setSpinning(true);
    const res = await install(id).finally(() => {
      setSpinning(false);
    });
    if (res.state) {
      handleQuery();
      messageTip("success", "安装成功");
    } else {
      messageTip("error", res.message);
    }
  };

  // 删除
  const handleDelete = async (id: number) => {
    const res = await remove(id);
    if (res.state) {
      handleQuery();
      messageTip("success", "删除成功");
    } else {
      messageTip("error", res.message);
    }
  };

  // 新增
  const handleAdd = () => {
    setDialogData(null);
    setOpen(true);
  };

  // 修改
  const handleModify = (values: DataType) => {
    setDialogData(values);
    setOpen(true);
  };

  // 部署
  const handleDeploy = async (projectId: number) => {
    const res = await gitlog(projectId);
    const gitId = res.data[0].hash;
    router.push(`/snapshot/${projectId}/${gitId}`);
  };

  // 查询
  const handleQuery = async () => {
    setLoading(true);
    const res = await query().finally(() => {
      setLoading(false);
    });
    if (res.state) {
      setTableList(res.data);
    } else {
      messageTip("error", res.message);
    }
  };

  useEffect(() => {
    handleQuery();
  }, []);

  return (
    <>
      {contextHolder}
      <Container>
        <Spin spinning={spinning} fullscreen />
        <Dialog
          messageTip={messageTip}
          getList={handleQuery}
          setOpen={setOpen}
          data={dialogData}
          open={open}
        />
        <Button
          type="primary"
          style={{ marginBottom: 24, float: "right" }}
          onClick={handleQuery}
        >
          刷新
        </Button>
        <Button
          color="green"
          variant="solid"
          style={{ marginRight: 12, marginBottom: 24, float: "right" }}
          onClick={handleAdd}
        >
          新增
        </Button>
        <Table<DataType>
          columns={getColumns(
            handleClone,
            handlePull,
            handleInstall,
            handleDeploy,
            handleModify,
            handleDelete
          )}
          dataSource={tableList}
          loading={loading}
          tableLayout="auto"
          rowKey="id"
          scroll={{
            x: "80%",
            y: 316,
          }}
        />
      </Container>
    </>
  );
}
